import React, { useState, useMemo, memo } from 'react';
import useMonitoringModel from '../../useModels/useMonitoringModel.js';
import { Modal, Menu, Dropdown, message, Table, Button } from 'antd';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import classnames from 'classnames';
import useModel from '../../useModels/useModel.js';
import moment from 'moment';

const SpTable = () => {
  const {
    state: { customAllList },
  } = useModel(model => [model.state.customAllList]);
  const model = useMonitoringModel(model => [
    model.spList,
    model.spLoading,
    model.subDevRow,
    model.suItemData,
  ]);
  const { spList, suItemData, subDevRow, setMonitorState, spLoading: loading } = model;

  const columns = [
    {
      title: '监控点ID',
      align: 'center',
      ellipsis: true,
      dataIndex: 'spId',
      key: 'spId',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '监控点名称',
      align: 'center',
      ellipsis: true,
      dataIndex: 'spName',
      key: 'spName',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '监控点类型',
      align: 'center',
      dataIndex: 'spTypeName',
      key: 'spTypeName',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '更新时间',
      width: '25%',
      align: 'center',
      sorter: (a, b) => a.reportTime - b.reportTime,
      dataIndex: 'reportTime',
      key: 'reportTime',
      render: (text, row, index) => {
        return <>{text ? moment(text).format('YYYY-MM-DD  hh:mm:ss') : '-'}</>;
      },
    },
    {
      key: 'value',
      align: 'center',
      sorter: (a, b) => a.value - b.value,
      title: '值',
      dataIndex: 'value',
      render: (text, row, index) => {
        return <>{text || '-'}</>;
      },
    },
    {
      title: '操作',
      width: '8%',
      render: (text, row, index) => {
        return (
          <Dropdown overlay={menu(row, setMonitorState, subDevRow, suItemData, customAllList)}>
            <IconFont type={'icongengduo1'} onClick={e => e.preventDefault()} />
          </Dropdown>
        );
      },
    },
  ];
  return useMemo(() => {
    let obj = {};

    spList[0] && (obj['scroll'] = { y: 356 });
    return (
      <div>
        <Table
          {...obj}
          loading={loading}
          className={classnames(styles['table-wrap'], styles['sp-height'])}
          columns={columns}
          dataSource={spList}
          rowKey={'spId'}
          pagination={false}
        />
      </div>
    );
  }, [spList]);
};

const menu = (item, setState, subDevRow, suItemData, customAllList) => {
  const remote = customAllList.filter(item => {
    return item.name === '谣调';
  });
  const control = customAllList.filter(item => {
    return item.name === '谣控';
  });
  const handleMenuClick = (e, item) => {
    switch (e.key) {
      case 'r-setting':
        setState({
          customMessageData: remote[0],
          field: {
            suId: suItemData.suId,
            deviceId: subDevRow.deviceId,
            spId: item.spId,
            value: '',
          },
          visible: true,
        });
        break;
      case 'rc':
        setState({
          customMessageData: control[0],
          field: {
            suId: suItemData.suId,
            deviceId: subDevRow.deviceId,
            spId: item.spId,
            value: '',
          },
          visible: true,
        });
        break;
    }
  };
  return (
    <Menu
      onClick={e => {
        handleMenuClick(e, item);
      }}
    >
      {!remote[0] && !control[0] && (
        <Menu.Item key={'none'} className={styles['no-data']}>
          {'暂无操作'}
        </Menu.Item>
      )}
      {remote[0] && (
        <Menu.Item key={'r-setting'} className={styles['remote-setting']}>
          <IconFont type={'iconyaotiao'} />
          <span>谣调</span>
        </Menu.Item>
      )}
      {control[0] && (
        <Menu.Item key={'rc'} className={styles['remote-control']}>
          <IconFont type={'iconyaokong'} />
          <span>遥控</span>
        </Menu.Item>
      )}
    </Menu>
  );
};
export default SpTable;
